<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯推荐模块</title>
    <style>
        body,
        div,
        ul,
        li,
        a {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            color: #fff;
        }

        .container {
            width: 100%;
            height: 500px;
            background-color: rgb(172, 211, 211);
            position: relative;
        }

        .top {
            width: 100%;
            height: 70px;
            background-color: rgba(255, 255, 255, 0.2);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }

        .images {
            width: 100%;
            height: 100%;
        }

        .images>a {
            display: none;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center 0;
        }

        .images>.active {
            display: block !important;
        }

        .right {
            width: 350px;
            height: 430px;
            position: absolute;
            top: 70px;
            right: 0;
            background-color: rgba(15, 15, 30, 0.4);
        }

        .title {
            width: 300px;
            height: 35px;
            line-height: 35px;
            color: #fff;
            font-size: 22px;
            font-weight: 700;
            cursor: pointer;
            padding-left: 45px;
        }

        .title:first-child {
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .title:first-child::after {
            position: absolute;
            top: 55px;
            height: 1px;
            left: 10px;
            right: 10px;
            content: '';
            background-color: rgba(255, 255, 255, 0.1);
        }

        .title:nth-child(2) {
            margin-bottom: 10px;
        }

        /* 右侧导航条默认样式 */
        .alist>a {
            display: block;
            width: 300px;
            height: 35px;
            line-height: 35px;
            margin-left: 45px;
        }

        .nav {
            font-size: 0;
        }

        .nav span {
            font-size: 16px;
        }

        /* 右侧导航条被选中时的样式 */
        .alist>.active {
            width: 300px;
            font-size: 16px;
            color: #ff5c38;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            /* transition: all .2s; */
        }

        .alist>.active>span {
            display: inline;
            font-size: 22px;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="top"></div>
        <div class="images">
            <a href="#"></a>
        </div>
        <div class="right">
            <div class="title">
                <img src="./img/all.png" alt="">
                猜你会追
            </div>
            <div class="title">
                <img src="./img/tj.png" alt="">
                重磅推荐
            </div>
            <div class="alist">

            </div>
        </div>
    </div>
    <script src="./data.js"></script>
    <script>
        var images = document.querySelector(".images");
        var alistDOM = document.querySelector(".alist");
        var activeTitle = "";
        var activeImg = "";
        var titleDOM = [];
        var imgDOM = [];
        var t = null;
        data.forEach(function (item, index) {
            // 1. 底部背景图
            var tagA = document.createElement("a");
            tagA.setAttribute("href", "#");
            var style =
                "background-color:" +
                item.bg +
                ";background-image:url(" +
                item.img +
                ")";
            tagA.setAttribute("style", style);
            images.appendChild(tagA);
            // 右侧导航条
            var tagA1 = document.createElement("a");
            tagA1.setAttribute("href", "#");
            tagA1.setAttribute("class", "nav");
            tagA1.setAttribute("title", item.title + "：" + item.desc);
            // var banners = item.title.split(":");
            tagA1.innerHTML = " <span>" + item.title + "</span> " + item.desc;
            alistDOM.appendChild(tagA1);
            // 默认第一条被选中
            if (index == 0) {
                tagA.setAttribute("class", "active");
                tagA1.setAttribute("class", "active");
                activeImg = tagA;
                activeTitle = tagA1;
            }
            tagA1.onmouseenter = function () {
                activeImg.removeAttribute("class");
                activeTitle.setAttribute("class", "nav");
                tagA.setAttribute("class", "active");
                tagA1.setAttribute("class", "active");
                activeImg = tagA;
                activeTitle = tagA1;
                clearInterval(t);
            };
            titleDOM.push(tagA1);
            imgDOM.push(tagA);
            tagA1.onmouseleave = function () {
                t = setInterval(move, 3000);
            };
        });
        function move() {
            activeImg.removeAttribute("class");
            activeTitle.setAttribute("class", "nav");
            var index = titleDOM.indexOf(activeTitle);
            if (index == titleDOM.length - 1) {
                activeTitle = titleDOM[0];
                activeImg = imgDOM[0];
            } else {
                activeImg = imgDOM[index + 1];
                activeTitle = titleDOM[index + 1];
            }
            activeImg.setAttribute("class", "active");
            activeTitle.setAttribute("class", "active");
        }
        t = setInterval(move, 3000);

    </script>
</body>

</html>